import React ,{useState,useLayoutEffect}from 'react'
import Swiper from 'react-native-swiper';
import { StyleSheet, Text, View, Image, ImageBackground, FlatList, TouchableOpacity, Button, TextInput, ScrollView } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Ionicons } from '@expo/vector-icons';
import '../../global'
const shopList = [
  {
    key:0,
    value: '北欧原木色置物架',
    src: require('../../images/img.png'),
  },
  {
    key:1,
    value: '简约黑檀木茶几',
    src: require('../../images/img2.png'),
  },
  {
    key:2,
    value: '北欧白橡木书架',
    src: require('../../images/img3.png'),
  },
  {
    key:3,
    value: '北欧风餐边柜',
    src: require('../../images/img4.png'),
  },
  {
    key:4,
    value: '北欧白橡木椅子',
    src: require('../../images/img5.png'),
  },
  {
    key:5,
    value: '北欧白橡木柜子',
    src: require('../../images/img6.png'),
  },
]

const Home_Recommend = () => {
  const [isCollect,setIsCollect]=useState([]);
  const [isFresh,setIsFresh]=useState(false);
  useLayoutEffect(()=>{
    AsyncStorage.getItem('isCollect')
    .then(res => {
        if (res) {
          setIsCollect(JSON.parse(res));
        }
    })
  },[isFresh])
  const storeData=(arr)=>{
    // let arr = isCollect
    AsyncStorage.setItem('isCollect',JSON.stringify(arr))
  }
  return (
    <View style={{ flex: 1 }}>
      {/**banner */}
      <View style={{ flex:0.6}}>
        <Swiper
          showsButtons={false}
          loop={true}
          autoplay={true}
          autoplayTime={3}
          dot={<View style={{    //选中的圆点样式
            marginLeft: 5,
            backgroundColor: 'white',
            width: 10,
            height: 2,
          }} />}
          activeDot={<View style={{    //选中的圆点样式
            marginLeft: 5,
            backgroundColor: '#ffdb2c',
            width: 10,
            height: 2,
          }} />}
        >
          <View>
            <Image source={require('../../images/banner1.png')} style={styles.imgbg} />
          </View>
          <View>
            <Image source={require('../../images/banner2.jpeg')} style={styles.imgbg} />
          </View>
          <View>
            <Image source={require('../../images/banner3.jpeg')} style={styles.imgbg} />
          </View>
        </Swiper>
      </View> 
      {/**title */}
      <View style={styles.title}>
        <Image source={require('../../images/title.png')} style={{ width: width(385), height: height(70) }} />
      </View> 
      {/**商品列表 */}
      <View style={styles.list}>
        <FlatList
          data={shopList}
          numColumns={2}
          contentContainerStyle={{ alignItems: 'center' }}
          renderItem={({ item }) => {
            return <View style={styles.listItem}>
              <ImageBackground source={item.src} style={{ width: width(331), height: height(222) }}>
                {/**收藏按钮 */}
                <TouchableOpacity style={styles.listIcon}
                  activeOpacity={0.9}
                  onPress={() => {
                    let newArr=isCollect;
                    newArr[item.key]=!newArr[item.key];
                    setIsCollect(newArr);
                    storeData(newArr);
                    setIsFresh(!isFresh)
                  }}>
                  <Ionicons name="star-half" size={24} color={isCollect[item.key] ? '#f23030' : '#ccc'} />
                </TouchableOpacity>
                {/**商品名称栏 */}
                <View style={styles.listText}>
                  <Text style={{ color: 'white', textAlign: 'center', textAlignVertical: 'center' }}>{item.value}</Text>
                </View> 
              </ImageBackground>
            </View>

          }}
          keyExtractor={item => item.value}
          key={item => item.value}
        />
      </View>

    </View>
  )
}
const styles = StyleSheet.create({
  imgbg: {
    width: width(750),
    height: height(320)
  },
  title: {
    flex:0.2,
    // height: height(130),
    // width: '100%',
    justifyContent: 'center',
    alignItems: 'center'
  },
  list: {
    flex:1,
    height: height(800),
  },
  listItem: {
    width: width(331),
    height: height(222),
    margin: 7
  },
  listText: {
    position: 'absolute',
    height: height(53),
    width: '100%',
    backgroundColor: 'rgba(0,0,0,0.5)',
    bottom: 0,
    justifyContent: 'center'
  },
  listIcon: {
    width: width(48),
    height: height(48),
    borderRadius: width(24),
    backgroundColor: 'white',
    position: 'absolute',
    bottom: width(55),
    right: width(15),
    justifyContent: 'center',
    alignItems: 'center'
  }
})
export default Home_Recommend